<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <!-- 标签页的内容 -->
        <!-- 高级搜索-->
        <button-search :show-search="false">
            <!-- 会匹配和使用到slot name=left的插槽 -->
            <template #left>
                <el-button type="success" size="mini" @click="openModel(false)">添加类型</el-button>
                <el-button type="danger" size="mini" @click="deleteALL()">批量删除</el-button>
            </template>
        </button-search>

        <!-- 商品列表 -->
        <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite;"
            @selection-change="handleSelectionChange">
            <!-- 添加顶部间距 -->
            <el-table-column type="selection" width="45" style="position: flex; align-items: center;" />
            <el-table-column label="类型名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="属性标签" align="center">
                <template slot-scope="scope">
                    {{ scope.row.value_list | formatValue }}
                </template>
            </el-table-column>
            <el-table-column prop="order" label="排序" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">`
                    <el-button size="mini" plain @click="changeStatus(scope.row)"
                        :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用' : '禁用' }}</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="ischeck" label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <!-- slot-scope="scope"创建了一个名为scope的新作用域，
                             它包含了子组件传递给插槽的所有数据。然后我们可以使用v-for指令来遍历scope.items。 -->
                    <el-button-group>
                        <!-- plain镂空 -->
                        <el-button type="primary" icon="el-icon-arrow" size="mini" plain
                            @click="openModel(scope)">修改</el-button>
                        <!-- scope.row传递当前对象过去 -->
                        <el-button type="danger" size="mini" plain @click="delItem(scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 底部 -->
        <div style="height: 60px;">
            <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
                style="bottom:0;left: 200px;right: 0; z-index: 100;">
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-footer>

            <!-- 新增、修改规格的模态框 -->
            <el-dialog title="添加类型" :visible.sync="createModel" top="5vh" width="70%">
                <!-- 表单内容 -->
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="类型名称" prop="name">
                        <el-input v-model="form.name" size="mini" placeholder="类型名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="form.order" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status" size="mini">
                            <el-radio :label="1" border>启用</el-radio>
                            <el-radio :label="0" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关联规格">
                        <div class="d-flex">
                            <span class="skuListItem px-3 py-2 border rounded mr-3" style="line-height:initial;"
                                v-for="(item, index) in form.sku_list" :key="index">
                                <font>{{ item.name }}</font>
                                <i class="el-icon-delete" @click="deleteFormSkuList(index)"></i>
                            </span>
                            <el-button size="mini" @click="chooseSkus()">
                                <i class="el-icon-plus"></i>
                            </el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="属性列表">
                        <template>
                            <el-table :data="value_list" style="width: 100%;align-items: left;">
                                <el-table-column prop="order" label="排序" width="65">
                                    <template slot-scope="scope">
                                        <!--scope.row.order 拿到的是                
                                        value_list: [{
                                                order: 50,
                                                name: '特性',
                                                type: 'input',
                                                value: '属性值',
                                            }] 此时便可以绑定order-->
                                        <el-input v-model="scope.row.order" size="mini" placeholder="排序"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="属性名称" width="120">
                                    <template slot-scope="scope">
                                        <!--scope.row.order 拿到的是                
                                        value_list: [{
                                                order: 50,
                                                name: '特性',
                                                type: 'input',
                                                value: '属性值',
                                            }] 此时便可以绑定order-->
                                        <el-input v-model="scope.row.name" size="mini" placeholder="属性名称"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="type" label="所属类型" width="110">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.type" size="mini" placeholder="请选择所属类型">
                                            <el-option label="输入框" value="input"></el-option>
                                            <el-option label="单选框" value="radio"></el-option>
                                            <el-option label="多选框" value="checkbox"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="是否显示" width="80">
                                    <template slot-scope="scope">
                                        <el-switch v-model="scope.row.status" :active-value="1"
                                            :inactive-value="0"></el-switch>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="default" label="属性值">
                                    <!-- v-if="scope.row.type !== 'input'"不为input时显示输入框 -->
                                    <template slot-scope="scope" v-if="scope.row.type === 'input'">
                                        <!-- scope.row.isEdit为true显示文本区域，否则显示属性名称 -->
                                        <el-input v-if="scope.row.isEdit" type="textarea" v-model="scope.row.default"
                                            size="mini" placeholder="一行一个属性值，多个属性值换行输入">
                                        </el-input>
                                        <span v-else>{{ scope.row.default }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="180">
                                    <template slot-scope="scope">
                                        <el-button type="link" size="mini" v-if="scope.row.type === 'input'"
                                            @click="editRow(scope)">{{ scope.row.isEdit ? '完成' : '编辑属性值' }}</el-button>
                                        <!-- delRow(scope.$index)获取当前的索引 -->
                                        <el-button type="link" size="mini" @click="delRow(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" icon="el-icon-plus" @click="addValue">添加一个属性

                        </el-button>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="createModel = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import buttonSearch from '@/components/common/button-search.vue';
import common from '@/common/mixins/common.js';

export default {
    name: 'GoodListMange',

    // 混入的使用
    inject: ['layout', 'app'],
    mixins: [common],
    components: { buttonSearch },
    data() {
        return {
            preUrl: 'goods_type',

            form: {
                name: '',

                order: 50,
                status: 1,
                sku_list: [],// 关联的商品规格列表
            },
            value_list: [
                //     {
                //     order: 50,
                //     name: '特性',
                //     type: 'input',
                //     default: '属性值',
                //     isEdit: false,
                // }
            ],
            tableData: [],
            // tableData: [{
            //     id: 0,
            //     name: '鞋子',
            //     order: 50,
            //     status: 1,
            //     value: '红色，蓝色',
            //     // 关联的sku_list列表
            //     sku_list: [
            //         { id: 1, name: '颜色' },
            //         { id: 2, name: '尺寸' },
            //     ],
            //     value_list: [
            //         {
            //             order: 50,
            //             name: '特性',
            //             // 
            //             type: 'input',
            //             value: '',
            //         },
            //         {
            //             order: 50,
            //             name: '电池',
            //             type: 'radio',
            //             value: '',
            //         }
            //     ]
            // }],
            multipleSelection: [],
            currentPage: 1,
            createModel: false,
            editIndex: -1,
            // 表单验证
            rules: {
                // 需要与prop="value"绑定的值一致
                name: [
                    { required: true, message: '类型名称不能为空', trigger: 'blur' },
                ],
                default: [
                    { required: true, message: '类型不能为空', trigger: 'blur' },
                ],
            },
        };
    },
    created() {

    },
    computed: {
        // 关联规格id组成的一维数组
        skus_id() {
            return this.form.sku_list.map(item => item.id)
        }
    },
    // 让商品属性一列显示sku—list的值，并使用逗号拼接
    filters: {
        formatValue(value) {
            // ['特性'，’xxx]
            let arr = value.map(v => v.name)
            return arr.join(',')
        }
    },
    methods: {
        getListResult(e) {
            // 获取商品类型列表
            this.tableData = e.list.map(item => {
                item.value_list = item.goods_type_values
                // 在点击修改进行渲染的时候，关联规格这个渲染不出来，因为在后台中使用的名称是skus，而在此处是sku——list
                item.sku_list = item.skus
                return item
            })
        },
        // // 批量删除，写入混入
        // deleteALL() {
        //     this.$confirm('是否要删除这些项目?', '提示', {
        //         confirmButtonText: '删除',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.multipleSelection.forEach(item => {
        //             let index = this.tableData.findIndex(v => v.id == item.id)
        //             if (index !== -1) {
        //                 this.tableData.splice(index, 1)
        //             }
        //         })
        //         this.multipleSelection = []
        //         this.$message({
        //             type: 'success',
        //             message: '删除成功!'
        //         });
        //     })
        // },
        //  添加类型事件
        openModel(e = false) {
            // 如果e为false，说明是添加操作，执行添加操作
            if (!e) {
                // 初始化表单
                this.form = {
                    name: '',
                    order: 50,
                    status: 1,
                    sku_list: []
                }
                this.value_list = []
                // 增加操作
                this.editIndex = -1
            } else {
                // 修改操作
                this.form = {
                    // 把整个对象同个e.row传进来
                    ...e.row
                }
                this.value_list = [...e.row.value_list]
                // 修改时设置，scope中包含的一个index
                this.editIndex = e.$index
            }
            this.createModel = true
        },
        // 添加类型
        submit() {
            this.$refs.form.validate(res => {
                // 验证属性列表
                var result = true
                var message = []
                // table侧边的消息提示
                this.value_list.forEach((item, index) => {
                    let no = index + 1
                    if (item.order == '') {
                        result = result && false
                        message.push('第' + no + '行排序不能为空')
                    }
                    if (item.name == '') {
                        result = result && false
                        message.push('第' + no + '行属性名称不能为空')
                    }
                    if (item.type == 'input' && item.default == '') {
                        result = result && false
                        message.push('第' + no + '行属性值不能为空')
                    }
                })
                if (!result) {
                    var temp = ''
                    message.forEach(v => {
                        temp += `<li>${v}</li>`
                    })
                    return this.$notify({
                        title: '提示',
                        dangerouslyUseHTMLString: true,
                        message: message.join(`<ul>${temp}</ul>`),
                        type: 'warning',
                        duration: 2000,
                    })
                }
                if (res) {
                    // var msg = '添加'
                    let value_list = this.value_list.map(item => {
                        // 将换行替换为逗号，因为在数据库中存储的default是逗号分隔的，而此处写的是以换行分割
                        if (item.default) {
                            item.default = item.default.replace(/\n/g, /,/g)
                        }
                        return item
                    })
                    let data = {
                        ...this.form,
                        skus_id: this.skus_id,
                        value_list: [...value_list]
                    }
                    let id = 0
                    // 代表是修改
                    if (this.editIndex !== -1) {
                        // this.tableData.unshift({
                        //     ...this.form,

                        //     value_list: [...this.value_list]
                        // })
                        // 那到当前的对象以及他的id
                        let item = this.tableData[this.editIndex]
                        id = item.id
                    } 
                    // else {
                        // msg = '修改'
                        // let item = this.tableData[this.editIndex]
                        // item.name = this.form.name
                        // item.order = this.form.order
                        // item.status = this.form.status
                        // item.type = this.form.type
                        // // item.value = this.form.value.replace(/,/g,/\n/g)
                        // item.sku_list = this.form.sku_list
                        // item.value_list = this.value_list
                        // this.tableData[this.editIndex]=this.form
                    // }
                    // 提交表单
                    this.addOrEdit(data,id)
                    this.createModel = false
                    // this.$message({
                    //     message: msg + '成功',
                    //     type: 'success',
                    // });
                }
            })
        },

        // 用来加载数据，监听点的是哪一个tab
        handleClick() {
            // console.log(this.activeName);
        },

        // // 选中，也在混入中
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },

        // // 删除当前商品，写入混入
        // delItem(scope) {
        //     this.$confirm('是否要删除该规格?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.tableData.splice(scope, 1)
        //         this.$message({
        //             type: 'success',
        //             message: '删除成功!'
        //         });
        //     })
        // },
        // // 修改状态，在混入中找到 
        // changeStatus(item) {
        //     // 请求服务端修改状态代码：

        //     // 修改前端
        //     item.status = !item.status
        //     this.$message({
        //         message: item.status ? '启用成功' : '禁用成功',
        //         type: 'success',
        //         duration: 2000
        //     })
        // },
        onSubmit() {
            console.log('submit!');
        },
        // 添加属性
        addValue() {
            this.value_list.push({
                order: 50,
                name: '',
                type: 'input',
                default: '',
                isEdit: false,
            })
        },
        // 编辑属性值
        editRow(scope) {
            scope.row.isEdit = !scope.row.isEdit
        },
        // 删除属性
        delRow(index) {
            this.value_list.splice(index, 1)
        },
        // 关联商品规格的模态框
        chooseSkus() {
            // 确保 sku_list 一定为数组，防止未定义报错
            if (!Array.isArray(this.form.sku_list)) {
                this.form.sku_list = [];
            }
            // 如果属性已经关联过则不允许再被选择
            this.app.chooseSkus((e) => {
                let index = this.form.sku_list.findIndex(item => {
                    return item.id === e.id
                })
                if (index === -1) {
                    this.form.sku_list.push(e)
                }
                // console.log('e', e)
            })
        },

        // 删除关联的商品规格
        deleteFormSkuList(index) {
            this.form.sku_list.splice(index, 1)
        }
    },
};
</script>
<style scoped>
.skuListItem>i {
    display: none;
}

.skuListItem:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.skuListItem:hover>font {
    display: none;
}

.skuListItem:hover>i {
    display: inline-block;
}
</style>